<template>
	<view class="archives-info">
		<!-- 顶部悬浮 -->
		<view class="fixed-top">
			<icon class="icon-ANQUAN"></icon>
			<text>为了医生更安全的诊疗，请填写真实信息哦～</text>
		</view>
		<!-- 基础信息 -->
		<view class="archives-info-h4">基础信息</view>
		<view class="archives-info-img">
			<icon class="icon-uploadImg"></icon>
			<!-- <image src="" mode="" class="info-img"></image> -->
		</view>
		<view class="rchives-info-item info-border">
			<text class="rchives-info-title">爱宠昵称</text>
			<input type="text" />
		</view>
		<picker @change="bindPickerChangeVarieties" :value="varietiesIndex" :range="varietiesArray" range-key="name">
			<view class="rchives-info-item info-border">
				<text class="rchives-info-title">宠物品种</text>
				<input type="text" :disabled="true" />
			</view>
		</picker>
		<view class="rchives-info-item info-border">
			<text class="rchives-info-title">性别</text>
			<view class="rchives-info-radio">
				<view class="rchives-info-radio-item" v-for="(item, index) in sexArray" :key="index" @click="selectRadio(item.id, 0)">
					<view class="radio-img" :class="{ 'radio-img-active': item.id == sexId }"></view>
					<text>{{ item.name }}</text>
				</view>
			</view>
		</view>
		<view class="rchives-info-item info-border" @click="selectDate">
			<text class="rchives-info-title">出生年月</text>
			<input type="text" :disabled="true" v-model="dateTime" />
		</view>
		<view class="rchives-info-item">
			<text class="rchives-info-title">体重</text>
			<input type="text" />
		</view>
		<!-- 更多信息 -->
		<view class="archives-info-h4" style="margin: 40rpx 0 32rpx;">更多信息</view>
		<view class="rchives-info-item info-border">
			<text class="rchives-info-title">按时疫苗</text>
			<view class="rchives-info-radio">
				<view class="rchives-info-radio-item" v-for="(item, index) in vaccineArray" :key="index" @click="selectRadio(item.id, 1)">
					<view class="radio-img" :class="{ 'radio-img-active': item.id == vaccineId }"></view>
					<text>{{ item.name }}</text>
				</view>
			</view>
		</view>
		<view class="rchives-info-item info-border">
			<text class="rchives-info-title">按时驱虫</text>
			<view class="rchives-info-radio">
				<view class="rchives-info-radio-item" v-for="(item, index) in expellingArray" :key="index" @click="selectRadio(item.id, 2)">
					<view class="radio-img" :class="{ 'radio-img-active': item.id == expellingId }"></view>
					<text>{{ item.name }}</text>
				</view>
			</view>
		</view>
		<view class="rchives-info-item">
			<text class="rchives-info-title">允许通知</text>
			<evan-switch active-color="#34D1A9" size="16" v-model="kaiguan"></evan-switch>
		</view>
		<!-- 保存 -->
		<button class="save-btn">保存</button>
		<!-- 日期选择 -->
		<mx-date-picker
			color="#34D1A9"
			:show="showPicker"
			:type="'date'"
			:value="'2021-08-04'"
			:show-tips="true"
			:show-seconds="true"
			@confirm="confirmDate"
			@cancel="cancelDate"
		/>
	</view>
</template>

<script>
import EvanSwitch from '../components/evan-switch/evan-switch.vue';
import MxDatePicker from '../components/mx-datepicker/mx-datepicker.vue';
export default {
	components: {
		EvanSwitch,
		MxDatePicker
	},
	data() {
		return {
			varietiesArray: [{ name: '中国', id: 1 }, { name: '美国', id: 2 }, { name: '巴西', id: 3 }], //宠物品种
			varietiesIndex: 0, //宠物品种选择索引
			sexArray: [{ name: '公', id: 1 }, { name: '母', id: 2 }, { name: '公绝育', id: 3 }, { name: '母绝育', id: 4 }], //性别列表
			vaccineArray: [{ name: '无', id: 1 }, { name: '有', id: 2 }], //按时疫苗列表
			expellingArray: [{ name: '无', id: 1 }, { name: '有', id: 2 }, { name: '体内', id: 3 }, { name: '内外同驱', id: 4 }], //按时驱虫列表
			showPicker: false,
			sexId: '',
			vaccineId: '',
			expellingId: '',
			dateTime: '',
			kaiguan: true
		};
	},
	methods: {
		// 选择宠物品种
		bindPickerChangeVarieties(event) {
			console.log(event.detail);
		},
		// 出生日期
		selectDate() {
			this.showPicker = true;
		},
		// 确定选择出生时间
		confirmDate(event) {
			this.dateTime = event.value;
			this.showPicker = false;
		},
		// 取消选择出生时间
		cancelDate() {
			this.showPicker = false;
		},
		// 单选框
		selectRadio(id, type) {
			switch (type) {
				case 0:
					this.sexId = id;
					break;
				case 1:
					this.vaccineId = id;
					break;
				case 2:
					this.expellingId = id;
					break;
			}
		}
	},
	onLoad(options) {}
};
</script>

<style scoped lang="scss">
.archives-info {
	padding: 96rpx 32rpx 20rpx;
	font-size: 28rpx;
	.archives-info-h4 {
		font-size: 32rpx;
		font-weight: 600;
		color: #333333;
		line-height: 44rpx;
		margin-bottom: 24rpx;
	}
	.archives-info-img {
		width: 128rpx;
		height: 128rpx;
		margin-bottom: 12rpx;
		.icon-uploadImg {
			width: 100%;
			height: 100%;
			background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/pet-hospital/icon-archives-shangctp.png) no-repeat;
			background-size: cover;
		}
		.info-img {
			width: 100%;
			height: 100%;
			border-radius: 6rpx;
		}
	}
	.rchives-info-item {
		height: 96rpx;
		display: flex;
		align-items: center;
		.rchives-info-title {
			width: 148rpx;
			font-size: 28rpx;
			color: #999999;
		}
		& > input {
			height: 100%;
			flex: 1;
		}
		.rchives-info-radio {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #333333;
			.rchives-info-radio-item {
				display: flex;
				align-items: center;
				margin-right: 24rpx;
				.radio-img {
					width: 28rpx;
					height: 28rpx;
					border-radius: 50%;
					border: 2rpx solid #d4d4d4;
					box-sizing: border-box;
					margin-right: 4rpx;
				}
				.radio-img-active {
					background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/pet-hospital/icon-archives-select.png) no-repeat;
					background-size: cover;
					border: none;
				}
			}
		}
	}
	.info-border {
		position: relative;
		&::before {
			content: '';
			width: 670rpx;
			height: 2rpx;
			background: #f1f1f1;
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
		}
	}
	.fixed-top {
		padding: 0 32rpx;
		height: 64rpx;
		background: rgba(52, 209, 169, 0.12);
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #34d1a9;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		.icon-ANQUAN {
			width: 36rpx;
			height: 36rpx;
			background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/pet-hospital/icon-archives-anquanrenz.png) no-repeat center center;
			background-size: 26rpx 32rpx;
			margin-right: 10rpx;
		}
	}
	.save-btn {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		background: #34d1a9;
		border-radius: 40rpx;
		font-size: 32rpx;
		color: #f5faff;
		margin-top: 96rpx;
	}
}
</style>
